<template>
    <el-input style="width: 200px" placeholder="请输入名称" v-model="username"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-button type="success" @click="AddHandle">新增</el-button>
    <el-table :data="tableData" border stripe>
      <el-table-column prop="id" label="编号" width="140">
      </el-table-column>
      <el-table-column prop="username" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="电话">
      </el-table-column>
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" @click="EditHandle(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="DeleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <el-pagination
        :current-page=pageNum
        :page-sizes="[2, 3, 4, 5]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>

    <el-dialog v-model="dialogFormAdd" title="Add">
      <el-form :model="form">
        <el-form-item  label="编号:" >
          <el-input placeholder="请输入编号" v-model="form.id" size="small"/>
        </el-form-item>
        <el-form-item  label="名称:">
          <el-input placeholder="请输入名称" v-model="form.username" size="small"/>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input placeholder="请输入电话"  v-model="form.phone" size="small"/>
        </el-form-item>
      </el-form>
      <template #footer>
              <span class="dialog-footer">
              <el-button type="primary" @click="AddData">确认</el-button>
              <el-button type="danger" @click="dialogFormAdd = false">取消</el-button></span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormEdit" title="Edit">
    </el-dialog>
    <el-dialog v-model="dialogFormRemove" title="Remove">
    </el-dialog>
</template>

<script>
const axios=require('axios');
export default {
  name: "User",
  created() {
    this.load();
  },
  methods: {
    load() {
      axios.get("http://localhost:9090/user/page",
          {
            params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
            }
          }
      ).then(resp => {
        this.tableData = resp.data.data; //map
        this.total = resp.data.total;
      });
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    search() {
      if (this.username) {
        axios.get("http://localhost:9090/user/findByName",
            {
              params: {
                username: this.username
              }
            }
        ).then(resp => {
          //alert(resp.data[0].username);
          this.tableData=resp.data;  //list
        });
      }
      else alert("error!");
    },
    AddHandle() {
      this.dialogFormAdd = true;
    },
    EditHandle(row){
      this.form=row;
      this.dialogFormAdd = true;
      this.load();
    },
    DeleteHandle(id){
      axios.delete("http://localhost:9090/user/"+id).then(resp => {
        if(resp)
        {
          alert("删除成功！");
          this.load();
        }
        else
          alert("删除失败！");
      });
    },
    AddData(){
      axios.post("http://localhost:9090/user/add",this.form).then(resp => {
        if(resp)
        {
          alert("添加成功！");
          this.form.id='';
          this.form.username='';
          this.form.phone='';
        }
        else
          alert("添加失败！")
        this.dialogFormAdd = false;
      });}},
  data() {
    return {
      tableData:[],
      total: 0,
      pageNum:1,
      pageSize:3,
      username:'',
      form:{
        id: '',
        username:'',
        phone:'',
      },
      dialogFormAdd:false,
      dialogFormEdit:false,
      dialogFormRemove:false
    }}}
</script>

<style scoped>

</style>